<template>
  <div
    class="course-card"
    @click.stop="$toPage(`/pages/zhfw/courseDetail?indexCode=${row.indexCode}`)"
  >
    <div class="card-header">
      <div class="course-name">
        {{ row.courseName }}
        <img
          src="@/static/image/mx-icon.png"
          v-if="row.star === '1'"
          class="vip-tag"
        />
      </div>
      <div class="status-tag ended" v-if="row.courseStatus === '0'">待开始</div>
      <div class="status-tag" v-if="row.courseStatus === '1'">进行中</div>
      <div class="status-tag ended" v-if="row.courseStatus === '2'">已结束</div>
    </div>

    <div class="info-item">
      <span class="label">讲师：</span>
      <span class="value">{{ row.teacherName }}</span>
    </div>

    <div class="info-item">
      <span class="label">时间：</span>
      <span class="value">{{ row.courseStartTime }}</span>
    </div>

    <van-button
      round
      type="primary"
      class="action-btn"
      :disabled="row.courseStatus !== '1'"
      v-if="queryType !== '1' && row.courseStatus === '1' && !row.isBM"
      @click.stop="submit"
    >
      报名
    </van-button>
    <van-button
      round
      type="primary"
      class="action-btn"
      v-if="
        queryType !== '1' && row.courseStatus === '1' && row.isBM && !row.isSign
      "
      @click.stop.prevent="singnHandler"
    >
      签到
    </van-button>
    <activity-detail-submit
      ref="activity"
      appointment-type="3"
      :item-title="row.courseName"
      :item-index-code="row.indexCode"
      @success="success"
    />
  </div>
</template>

<script>
import ActivityDetailSubmit from '../../djzh/components/ActivityDetailSubmit.vue'
import { searchApprovalstatus } from '../../../api/tbMoralEducation'
import { mapGetters } from 'vuex'
import { Dialog, Toast } from 'vant'
import { tbAppointmentSave } from '../../../api/tbAppointment'
export default {
  components: { ActivityDetailSubmit },
  name: 'CourseCard',
  props: {
    row: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    queryType: {
      type: String,
      default: '',
    },
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    singnHandler() {
      console.log(123123)
      this.$toPage(`/pages/signIn?id=${this.row.indexCode}&type=course`)
    },
    submit() {
      const { indexCode } = this.row
      this.$showLoading('查询中...')
      searchApprovalstatus({
        indexCode,
        userId: this.userInfo.userId,
      })
        .then((res) => {
          this.$hideLoading()
          if (res.data) {
            Toast.fail({
              message: '您已报名，请勿重复报名',
              duration: 2000,
              forbidClick: true,
            })
          } else {
            this.save()
          }
        })
        .catch(() => {
          this.$hideLoading()
        })
    },
    save() {
      const _this = this
      const { indexCode, courseName } = this.row
      const formData = {
        ..._this.formData,
        appointmentType: '3',
        itemIndexCode: indexCode,
        appointmentUserId: _this.userInfo.userId,
        appointmentName: courseName,
        appointmentPersonName: _this.userInfo.personName,
        appointmentPhone: _this.userInfo.phone,
      }
      Dialog.confirm({
        title: '提示',
        message: '是否确认提交?',
      })
        .then(() => {
          _this.$showLoading('提交中...')
          tbAppointmentSave(formData)
            .then(() => {
              _this.$hideLoading()
              _this.show = false
              this.$emit('success')
              Toast.success('提交成功')
            })
            .catch(() => {
              _this.$hideLoading()
            })
        })
        .catch(() => {})
    },
    success() {
      this.$emit('success')
    },
  },
}
</script>

<style lang="scss" scoped>
.course-card {
  background: $uni-color-success;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
  position: relative;

  &.ended {
    opacity: 0.8;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .course-name {
      font-size: 17px;
      color: #1d6036;
      font-weight: bold;
      display: flex;
      align-items: center;

      .vip-tag {
        margin-left: 8px;
        width: 95px;
      }
    }

    .status-tag {
      font-size: 14px;
      padding: 2px 10px;
      border-radius: 0 8px 0 8px;
      position: absolute;
      top: 0;
      right: 0;
      background: #66c2ff;
      color: #f8e4a7;
      &.ended {
        background: #c8d6cf;
        color: #333;
      }
    }
  }

  .info-item {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;

    &:last-child {
      margin-bottom: 12px;
    }

    .label {
      color: #333;
    }

    .value {
      color: #333;
    }
  }

  .action-btn {
    width: 80px;
    height: 36px;
    position: absolute;
    right: 16px;
    bottom: 16px;

    &.ended-btn {
      background: #d8d8d8;
      border: none;
      color: white;
    }
  }
}
</style>
